<template>
    <view class="home">
        <!-- 导航栏 -->
        <uni-nav-bar class="uni-navbar" fontSize="60" color="#000" title="保时捷" backgroundColor="#fff" :shadow="false"
            :border="false">
            <block slot="left">
                <uni-icons @click="goback" color="#111111" type="left" size="24"></uni-icons>
            </block>
        </uni-nav-bar>
        <view class="content">
            <!-- logo图 -->
            <view class="brand-logo">
                <image class="logo-img" src="~@/static/images/brandlogo.jpg" mode="heightFix"></image>
            </view>
            <!-- 品牌列表 -->
            <view class="list-tabs mt30">
                <y-tabs v-model="activeIndex" swipeable sticky :offsetTop="offsetTop" @slide-change="slideChange"
                    @slide-end="slideEnd">
                    <y-tab class="y-tab-virtual" v-for="(title, index) in tabs" :title="title" :key="index">
                        <!-- 内容页滑动时锁住scroll-view的竖向滚动 -->
                        <scroll-view class="scroll-wrap" :scroll-y="locked && activeIndex === index ? false : true">
                            <brand-list :activeIndex="index" />
                        </scroll-view>
                    </y-tab>
                </y-tabs>
            </view>
        </view>
        <!-- 底部联系按钮 -->
        <contact-btn ref="contactBtn"></contact-btn>
        <!-- 弹窗 -->
        <contact-popup ref="contactPopup"></contact-popup>
    </view>
</template>

<script>
import brandList from '@/components/brand-list';
import contactPopup from "@/components/contact-popup.vue"
import contactBtn from "@/components/contact-btn.vue"
export default {
    // shared:表示页面 wxss 样式将影响到自定义组件
    options: {
        styleIsolation: 'shared'
    },
    components: {
        brandList,
        contactPopup,
        contactBtn
    },
    data() {
        return {
            tabs: ['全部', '未售/停售', '轿车', 'SUV', 'MPV', '排序'],
            activeIndex: 0, // 标签页当前选择项的下标
            offsetTop: 0, //粘性定位布局下与顶部的最小距离
            locked: false
        }
    },
    created() {
        // #ifdef H5
        this.offsetTop = 43;
        this.offsetTop = 0;
        // #endif
    },
    onLoad() {
    },
    methods: {
        handLocation() { },
        clickBannerItem(item) {
            console.info(item)
        },
        changeSwiper(e) {
            this.current = e.detail.current
        },
        goToDetail(index) {
            // 跳转到详情页的代码
            // 可以使用uni.navigateTo或uni.redirectTo等API实现页面跳转
        },
        // 内容滑动中触发
        slideChange() {
            this.locked = true
        },
        // 内容页滑动结束时触发
        slideEnd() {
            this.locked = false
        },
        goback() {
            // uni.navigateBack({ delta: 1 });
            uni.switchTab({
                url: '/pages/home/index'
            })
        },
        handleBigButtonClick(type) {
            this.$refs.contactPopup.$refs.popup.open(type)
        },

    }
}
</script>

<style lang="scss" scoped>
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    min-height: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    // padding: 32rpx 32rpx;
}

.brand-logo {
    height: 300rpx;
    text-align: center;

    .logo-img {
        width: 100%;
        height: 300rpx;
    }
}
</style>
